<!DOCTYPE html>
<html>
<head>
  <title>队列</title>
  <style type="text/css">
    .box{
      display: flex;
    }
    .gb{
      display: inline-block;
      width: 1px;
      margin-left: 3px;
      background: #000;
      animation:mymove .8s ease-in-out infinite;
      -webkit-animation:mymove .8s ease-in-out infinite; /*Safari and Chrome*/
    }

    @keyframes mymove
    {
      from {opacity: 0;}
      to {opacity: 1;}
    }

    @-webkit-keyframes mymove /*Safari and Chrome*/
    {
      from {opacity: 0;}
      to {opacity: 1;}
    }
  </style>
</head>
<body>
<div class="box">
  <div id="app"></div>
  <span class="gb"></span>
</div>
<script type="text/javascript">
  let Queue = (()=> {
    let items = new WeakMap();

    class Queue {
      constructor() {
        items.set(this, []);
      }

      enqueue(element) {
        let s = items.get(this);
        s.push(element);
      }

      dequeue() {
        let s = items.get(this);
        let r = s.shift();
        return r;
      }

      front() {
        let s = items.get(this);
        return s[0];
      }

      isEmpty() {
        let s = items.get(this);
        return s.length === 0;
      }

      clear() {
        items.set(this, []);
      }

      size() {
        let s = items.get(this);
        return s.length;
      }
    }

    return Queue;
  })();

  let queue = new Queue();
  queue.enqueue('我')
  queue.enqueue('是')
  queue.enqueue('一')
  queue.enqueue('个')
  queue.enqueue('快')
  queue.enqueue('乐')
  queue.enqueue('的')
  queue.enqueue('打')
  queue.enqueue('印')
  queue.enqueue('机')
  queue.enqueue('，')
  queue.enqueue('给')
  queue.enqueue('我')
  queue.enqueue('一')
  queue.enqueue('支')
  queue.enqueue('烟')
  queue.enqueue('和')
  queue.enqueue('打')
  queue.enqueue('火')
  queue.enqueue('机')
  function addEl(val) {
    let div = document.querySelector('#app');
    let text = div.innerHTML ? div.innerHTML : ''
    div.innerHTML = text + val;
  }
  function duihua() {
    setTimeout(() => {
      if(!queue.isEmpty()) {
        addEl(queue.dequeue())
        duihua()
      }
    }, 300)
  }
  duihua()

  /**
   * 优先队列
   * @author 韩广金
   * @DateTime 2018-12-28
   * @version  [version]
   * @param    {[type]}   ( [description]
   * @return   {[type]}     [description]
   */
  // function PriorityQueue() {
  //   let items = [];

  //   function QueueElement(element, priority) {
  //     this.element = element;
  //     this.priority = priority;
  //   }

  //   this.enqueue = function(element, priority) {
  //     let queueElement = new QueueElement(element, priority);
  //     let added = false;

  //     for (let i = 0; i < items.length; i++) {
  //       if(queueElement.priority < items[i].priority) {
  //         items.splice(i,0,queueElement)
  //         added = true;
  //         break;
  //       }
  //     }
  //     if(!added) {
  //       items.push(queueElement);
  //     }
  //   }

  //   this.dequeue = function() {
  //     return items.shift();
  //   }

  //   this.front = function() {
  //     return items[0];
  //   }

  //   this.isEmpty = function() {
  //     return items.length === 0;
  //   }

  //   this.size = function() {
  //     return items.length;
  //   }
  // }
  let PriorityQueue = (()=> {
    let items = new WeakMap();

    class QueueElement {
      constructor(element, priority) {
        this.element = element;
        this.priority = priority;
      }
    }

    class Queue {
      constructor() {
        items.set(this, []);
      }

      enqueue(element, priority) {
        let queueElement = new QueueElement(element, priority);
        let s = items.get(this);
        let added = false;

        for (let i = 0; i < s.length; i++) {
          if(queueElement.priority < s[i].priority) {
            s.splice(i,0,queueElement)
            added = true;
            break;
          }
        }
        if(!added) {
          s.push(queueElement);
        }

        let arr = []
      }

      dequeue() {
        let s = items.get(this);
        let r = s.shift();
        return r;
      }

      front() {
        let s = items.get(this);
        return s[0];
      }

      isEmpty() {
        let s = items.get(this);
        return s.length === 0;
      }

      size() {
        let s = items.get(this);
        return s.length;
      }
    }

    return Queue;
  })();

  let priorityQueue = new PriorityQueue();
  priorityQueue.enqueue('我', 4)
  priorityQueue.enqueue('她', 4)
  priorityQueue.enqueue('他', 4)
  priorityQueue.enqueue('谁', 5)
  priorityQueue.enqueue('爸爸', 2)
  priorityQueue.enqueue('妈妈', 3)
  priorityQueue.enqueue('爷爷', 1)
  console.log(priorityQueue.dequeue())
  console.log(priorityQueue.dequeue())
  console.log(priorityQueue.dequeue())
  console.log(priorityQueue.dequeue())
  console.log(priorityQueue.dequeue())
  console.log(priorityQueue.dequeue())
  console.log(priorityQueue.dequeue())
  function formatHtml(data, str) {
    return str.match(/\{\{(\w)\}\}/, function(match, key) {
      
    })
  }
</script>
</body>
</html>